<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

import deviceview from './module/deviceview.vue';
import monitorview from './module/monitorview.vue';
// import { getAirportList } from '#/api/daping/apiport';
import { getAirportList } from '#/api/daping/airport';


const router = useRouter();
const droneList = ref([
  {
    num: '1',
    Id: '大奖机场2',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利1',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
  {
    num: '1',
    Id: 'JDl mavic 3 pro',
    name: '李孝利',
    frequency: '大力路警务站',
    distance: '14:24:33',
  },
]);
const deviceList = reactive([
  {
    num: 1,
    Id: 1,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 2,
    Id: 2,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 3,
    Id: 3,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 4,
    Id: 4,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 5,
    Id: 5,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 6,
    Id: 6,
    name: '大疆机场',
    Site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 7,
    Id: 7,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 8,
    Id: 8,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 9,
    Id: 9,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 10,
    Id: 10,
    name: '大疆机场',
    Site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 11,
    Id: 11,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 12,
    Id: 12,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 13,
    Id: 13,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 14,
    Id: 14,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 15,
    Id: 15,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
  {
    num: 16,
    Id: 16,
    name: '大疆机场',
    site: '大理路警务站',
    organization: '飞行组',
    team: '大队',
    distance: '2024年12月2日 14:24:33',
    status: '已连接',
  },
]);
// 同样，这里的 url 也可以使用以 http 开头的外部链接
const quickNavList = ref([
  {
    id: 1,
    color: '#1fdaca',
    icon: 'ion:home-outline',
  },
  {
    id: 2,
    color: '#bf0c2c',
    icon: 'ion:grid-outline',
  },
  {
    id: 3,
    color: '#e18525',
    icon: 'ion:layers-outline',
  },
  {
    id: 4,
    color: '#3fb27f',
    icon: 'ion:settings-outline',
  },
]);
const params = {
  // status: 1,
}
const airport_list = reactive({
  records: [],
  id: ''
})
const airport_list_loading = ref(true)
const get_list = async () => {
  airport_list_loading.value = true
  try {
    const { data } = await getAirportList(params);
    airport_list_loading.value = false
    airport_list.records = data
  } catch (err) {
    airport_list_loading.value = false
    ElMessage.error('加载数据失败');
  }
}
get_list()
</script>
<template>
  <div class="control-management">
    <div class="drone" v-loading="airport_list_loading">
      <div class="drone-left" v-if="!airport_list_loading">
        <monitorview :airportList="airport_list.records" :loading="airport_list_loading" />
      </div>
      <div class="drone-right" v-if="!airport_list_loading">
        <deviceview :loading="airport_list_loading" :device-list="airport_list.records" @change-view="getchangeView" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.control-management {
  width: 100%;
  // max-width: 100%;
  // height: 100%;
  // max-height: 100%;
  height: calc(92vh);
  padding: 0;
  padding-top: 20px;
  // background: #707070;
  background-image: url('../../../../assets/jcbs_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.drone {
  display: flex;
  width: 100%;
  height: 100%;

  .drone-left {
    width: calc(100% - 390px);
    // margin-right: 1rem;
    margin: 10px;
  }

  .drone-right {
    width: 360px;
    height: calc(100% - 20px);
    margin: 10px 10px 10px 0;
    // overflow-y: auto;
  }
}
</style>
